<template>
  <div class="app-container">
    <div class="page-header -enter-x left-transition">
      <div class="user-info">
        <el-avatar :src="user.avatar" :size="70"></el-avatar>
        <div class="welcome-speech">
          <h1>
            {{ user.greetings }},
            <span class="user-name">{{ user.username }}</span
            >, {{ user.prompt }}
          </h1>
          <!-- <span class="text-secondary">
            {{ user.city }}，今日{{ user.weather }}，当前室外温度{{
              user.temperature
            }}℃！
          </span> -->
        </div>
      </div>
      <div class="work-info"></div>
    </div>
    <div class="page-content">
      <!-- <div class="content-left"></div>
      <div class="content-right">
        <el-card class="top-card -enter-x right-transition" shadow="never">
          <div slot="header" class="clearfix">
            <svg-icon icon-class="birthday" class="mr10"></svg-icon>
            <span>记录</span>
          </div>
          <el-skeleton
            style="width: 100%; height: 100%"
            :loading="loading"
            animated
          >
            <div v-show="birthdayItems.length > 0">
              <el-tag
                v-for="item in birthdayItems"
                :key="item.id"
                effect="plain"
                type="danger"
                class="mr10 mb10"
              >
                {{ item.label }}
              </el-tag>
            </div>
            <div v-show="birthdayItems.length == 0" class="birthday-content">
              <el-empty description="暂无数据" :image-size="100"></el-empty>
            </div>
          </el-skeleton>
        </el-card>
        <el-card class="middle-card -enter-x right-transition" shadow="never">
          <img src="../assets/images/illustration.svg" alt="" class="svgImg" />
        </el-card>
        <el-card class="bottom-card -enter-x right-transition" shadow="never">
          <div slot="header" class="clearfix">
            <span>统计</span>
          </div>
          <el-skeleton
            style="width: 100%; height: 100%"
            :loading="loading"
            animated
          ></el-skeleton>
        </el-card>
      </div> -->
    </div>
  </div>
</template>
<script>
window._AMapSecurityConfig = {
  securityJsCode: "4ef340d8f9bd5f9cd9efeda0f70cb7fb", //高德密钥
};
import AMapLoader from "@amap/amap-jsapi-loader";
// import { employeeBirthday } from "@/api/system/user.js";
// import { getWorkSummaryData } from "@/api/work/workSummary.js";
// import { getTodayRange, getWeekRange, getMonthRange } from "@/utils/index.js";
// import * as echarts from "echarts";

export default {
  name: "Index",
  data() {
    return {
      tableData: [],
      total: 0,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dateRange: [], // 日期范围

      user: {
        greetings: "",
        avatar: "",
        username: "",
        deptName: "",
        city: "",
        weather: "",
        temperature: "",
        prompt: "",
      },
      timer: null,
      loading: false,
      birthdayItems: [],
    };
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        if (val.path === "/index") {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
          }, 500);
        }
      },
      immediate: true,
    },
  },
  created() {
    //拿到vuex中的头像和用户名
    this.user.avatar = this.$store.state.user.avatar;
    console.log("213123",this.$store.state.user.avatar)

    this.user.username = this.$store.state.user.nickName;
    this.user.deptName = this.$store.state.user.dept.deptName;
    //问候语
    this.getGreetings();
    // this.dateRange = getMonthRange();
    // this.getList();
  },
  mounted() {
    //获取所在城市
    this.getCity();
    //初始化图表
    //十分钟刷新一次天气
    this.timer = setInterval(() => {
      this.getCity();
    }, 600000);
  },
  components: {},
  methods: {
    getGreetings() {
      const hour = new Date().getHours();
      const greetingsMap = [
        {
          endHour: 6,
          greetings: "凌晨好",
          prompt: "每个早起的人都在迎接新的机会！相信自己，今天会很精彩！",
        },
        {
          endHour: 9,
          greetings: "早上好",
          prompt: "新的一天充满无限可能，带着希望和热情出发吧！",
        },
        {
          endHour: 12,
          greetings: "上午好",
          prompt: "前进的每一步都是进步，相信你的努力会带来美好的结果！",
        },
        {
          endHour: 14,
          greetings: "中午好",
          prompt: "短暂的休息是为了更好的出发，保持乐观，未来更值得期待！",
        },
        {
          endHour: 17,
          greetings: "下午好",
          prompt: "离目标越来越近了！坚持不懈，你一定能实现心中的梦想！",
        },
        {
          endHour: 19,
          greetings: "傍晚好",
          prompt: "夕阳西下，也是新的开始。今天的努力，明天会给你惊喜！",
        },
        {
          endHour: 22,
          greetings: "晚上好",
          prompt: "今天的你又成长了很多，带着希望与信心，继续追逐梦想吧！",
        },
        {
          endHour: 24,
          greetings: "夜里好",
          prompt: "夜晚是思考与恢复的时刻，明天会更好，怀抱希望入眠吧！",
        },
      ];

      for (let i = 0; i < greetingsMap.length; i++) {
        if (hour < greetingsMap[i].endHour) {
          this.user.greetings = greetingsMap[i].greetings;
          this.user.prompt = greetingsMap[i].prompt;
          break;
        }
      }
    },
    //获取所在城市
    getCity() {
      AMapLoader.load({
        key: "529972764e1f26647f792c527172cc82", //高德地图密钥
        version: "2.0",
        plugins: [],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
      }).then((AMap) => {
        // 使用 AMap.CitySearch 获取当前城市
        AMap.plugin("AMap.CitySearch", () => {
          var citySearch = new AMap.CitySearch();
          citySearch.getLocalCity((status, result) => {
            if (status === "complete" && result.info === "OK") {
              this.user.city = result.city;
              this.getWeather(result.city);
            } else {
              // 如果无法获取城市信息，在这里处理错误
              console.error("无法获取当前城市");
            }
          });
        });
      });
    },

    // 获取当前城市天气
    getWeather(city) {
      // 在这里调用高德地图天气查询 API，使用获取到的城市信息
      // 请根据高德地图天气查询 API 的文档进行相应的调用
      // 示例代码可能如下，但具体请查阅 API 文档
      AMap.plugin("AMap.Weather", () => {
        var weather = new AMap.Weather();
        weather.getLive(city, (err, data) => {
          if (!err) {
            // console.log("当前天气：", data, data.weather);
            // 这里可以将天气信息存储到你的数据对象中
            this.user.weather = data.weather;
            this.user.temperature = data.temperature;
          } else {
            console.error("无法获取当前天气");
          }
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.app-container {
  width: 100%;
  height: calc(100vh - 84px); // navbar 50px + tags-view-container 34px
  background-color: #f5f5f5;
  padding: 0;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 125px;
    padding: 20px 24px;
    background-color: #fff;

    .user-info {
      display: flex;
      align-items: center;

      .welcome-speech {
        margin-left: 24px;

        h1 {
          margin-top: 0;
          margin-bottom: 0.5em;
          font-size: 18px;
          line-height: 28px;
          font-weight: 500;
          color: #333;

          .user-name {
            font-size: 20px;
            color: #000;
          }
        }

        span {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }

  .page-content {
    display: flex;
    width: 100%;
    height: calc(100% - 125px);
    padding: 16px;

    .content-left {
      width: 70%;
      height: 100%;
      margin-right: 16px;

      .top-card {
        width: 100%;
        height: 50%;
        margin-bottom: 16px;
      }

      .bottom-card {
        width: 100%;
        height: calc(46% - 16px);
      }
      ::v-deep.el-card .el-card__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        border-radius: 0 0 8px 8px;
        padding: 20px;
        width: 100% !important;
        height: 100% !important;
      }
    }

    .content-right {
      width: calc(30% - 16px);
      height: 100%;

      ::v-deep .top-card {
        width: 100%;
        height: 30%;
        margin-bottom: 16px;
        .el-card__body {
          height: calc(100% - 40px);
          .birthday-content {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .el-empty {
              padding: 0;
            }
          }
        }
      }

      .middle-card {
        width: 100%;
        height: calc(25% - 16px);
        margin-bottom: 16px;
        img {
          width: 60%;
          height: 100%;
        }
      }

      .bottom-card {
        width: 100%;
        height: calc(46% - 16px);
      }
    }
  }
}
</style>
